<template>
	<view class="content">
		<u-navbar title=" " leftIcon=" " placeholder :bgColor="bgColor" :border="false">
			<view class="left-wrap" slot="left" @click="show=true">
				<view class="lesson">
					<view class="lesson-name text-overfllow1">{{lessonName}}</view>
					<u-icon name="arrow-down" color="#000000" size="12" bold=""></u-icon>
				</view>
			</view>
			<view class="search-wrap" slot="center">
				<u-search v-model="searchValue" placeholder="搜索笔记" bgColor="#ffffff" :showAction="false" inputAlign="center" @search="onSearch(searchValue)"></u-search>
			</view>
		</u-navbar>
		<view class="main">
			<view class="title">精选笔记</view>
			<view class="list">
				<view class="item shadow" v-for="item in noteList" :key="item.id" @click="goNoteDetail(item)">
					<view class="top">
						<view class="note-name-line">
							<view class="note-name">📝 {{ item.name }}</view>
							<view class="user">{{ item.userName }}</view>
						</view>
						<view class="note-id">ID:{{ item.id }}</view>
						<view class="note-profile">{{ item.title || "暂无描述" }}</view>
					</view>
					<view class="bottom">
						<view class="icon-btns">
							<view class="icon-btns-item">
								<u-icon name="heart" color="#3d3d3d" size="14"></u-icon>
								<!-- <view class="icon-name">点赞</view> -->
							</view>
							<view class="icon-btns-item">
								<u-icon name="star" color="#3d3d3d" size="14"></u-icon>
								<!-- <view class="icon-name">收藏</view> -->
							</view>
							<view class="icon-btns-item">
								<u-icon name="download" color="#3d3d3d" size="14"></u-icon>
								<!-- <view class="icon-name">下载</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="load-more-text" v-if="loading">加载中...</view>
		<view class="load-more-text" v-else-if="noMore">没有更多笔记啦</view>


		<u-picker :show="show" :columns="columns" confirmColor="#ed7b54" @cancel="show=false"
			@confirm="onConfirmLesson"></u-picker>
		<custom-tab-bar class="fixed-tabbar" :currentIndex="2"></custom-tab-bar>
	</view>
</template>

<script>
	import middleApi from '@/api/middle.js'

	export default {
		
		// 监听绑定专业课
		watch: {
			majorList(newList) {
				if (newList.length > 0 && !this.lessonName) {
					this.lessonName = newList[0].majorName;
				}
			}
		},

		// 触底事件继续分页查询
		onReachBottom() {
			this.queryMain(); // 触底加载更多精选笔记
		},

		data() {
			return {
				bgColor: 'transparent',
				show: false,
				isFirstLoad: true, // 第一次进入页面标记
				lessonName: '专业课/考公考编科目',
				noteList: [], // 用于展示的精选笔记列表
				page: 1,
				pageSize: 10,
				loading: false,
				noMore: false,
				searchValue:"",

				majorList: [], // 保存接口完整数据（含id和name）
				columns: [], //选择器专用二维字符串数组
			};
		},


		async onLoad() {
			this.queryMain()
			this.queryMajorList()
		},

		onShow() {
			// 每次 tabbar 切回时都会调用
			if (!this.isFirstLoad) {
				this.queryMain();
			}
			this.isFirstLoad = false;
		},

		methods: {
			
			// 跳转笔记详情页面
			goNoteDetail(item) {
				const paramObj = {
					id: item.id,
					name: item.name,
					type: item.knowledgeBaseType,
				};
				uni.navigateTo({
					url: "/pages/index/noteDetail?params=" + encodeURIComponent(JSON.stringify(paramObj)),
				});
			},
			
			
			// 笔记搜索详情页
			onSearch(val) {
			  const keyword = val || this.searchValue;
			  // if (!keyword.trim()) {
			  //   uni.showToast({
			  //     title: '请输入关键词',
			  //     icon: 'none'
			  //   });
			  //   return;
			  // }
			
			  // 跳转到搜索结果页并传参
			  uni.navigateTo({
			    url: `./drawSearch?combineSearch=1&name=${keyword}`
			  });
			},

			onLike(item) {
				console.log('点赞笔记:', item.id);
			},
			onStar(item) {
				console.log('收藏笔记:', item.id);
			},
			onDownload(item) {
				console.log('下载笔记:', item.id);
			},


			onConfirmLesson(e) {
				const selectedName = e.value[0]
				this.lessonName = selectedName
				this.show = false
			},

			// 笔记搜索栏目
			async goSearch() {
				try {
					const params = {
						userId: this.userId,
						drawType: this.drawType,
						userType: this.userType,
						topicNo: this.topicNo,
					}
					const res = await middleApi.queryNotePage(params);
					if (res?.data?.code === 200) {
						this.topic = res.data.data;
						this.topicNo = this.topic.topicNo;
					} else {
						uni.showToast({
							title: '未搜索到相关笔记！',
							icon: 'none'
						});
					}
				} catch {
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
				}
			},


			// 精选笔记查询
			async queryMain() {
				if (this.loading || this.noMore) return;
				this.loading = true;
				try {
					const params = {
						type: uni.getStorageSync('bindType'), // 笔记类型： 0-考研 1-考公考编
						pageQueryDTO: {
							currentPage: this.page,
							pageSize: this.pageSize,
						},
						beautifulSelect: 1, // 精选笔记 0-否1-是
						code: uni.getStorageSync('bindCode'), // 专业课考公考编代码
					}
					const res = await middleApi.queryNotePage(params);
					if (res?.data?.code === 200) {
						const content = res.data.data?.content || [];

						// 如果是第一页，替换数据；否则追加
						if (this.page === 1) {
							this.noteList = content;
						} else {
							this.noteList = [...this.noteList, ...content];
						}

						// 判断是否还有更多数据
						if (content.length < this.pageSize) {
							this.noMore = true;
						} else {
							this.page += 1;
						}

					} else {
						uni.showToast({
							title: '未查询到笔记',
							icon: 'none'
						});
					}
				} catch {
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},


			// 专业课列表搜索
			async queryMajorList() {
				try {
					const params = {
						majorCode: uni.getStorageSync('bindCode')
					}
					const res = await middleApi.queryMajorList(params);
					if (res?.data?.code === 200) {
						this.majorList = res.data.data?.content || [];
						// 只取名字做选项，转成二维数组格式
						this.columns = [this.majorList.map(item => item.majorName)]
						// 默认选第一个专业课
						if (this.majorList.length > 0) {
							this.lessonName = this.majorList[0].name
						}
					} else {
						uni.showToast({
							title: '未获取到专业课信息',
							icon: 'none'
						});
					}
				} catch {
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
				}
			},


		}
	}
</script>
<style>
	page {
		padding-bottom: 107px;
	}
</style>
<style lang="scss" scoped>
	.lesson {
		// width: 152rpx;
		height: 66rpx;
		border-radius: 10rpx;
		background: #FCFCFC;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;

		.lesson-name {
			max-width: 100rpx;
			margin-right: 5rpx;
			color: #7F84A3;
		}
	}

	.search-wrap {
		width: 180px;
		height: 33px;
		border-radius: 20px;
		opacity: 1;
		background: #FCFCFC;
	}

	.main {
		.title {
			font-size: 42rpx;
			font-weight: 600;
			letter-spacing: 0.08em;
			color: #333333;
			margin: 48rpx 0 0 34rpx;
		}

		.list {
			margin-bottom: 40rpx;

			.item {
				margin: 28rpx 34rpx 0;
				color: #3d3d3d;
				border-radius: 30rpx;

				.top {

					border-radius: 30rpx 30rpx 0px 0px;
					opacity: 1;
					background: #F8F5F4;
					box-sizing: border-box;
					padding: 34rpx 34rpx 20rpx;

					.note-name-line {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.note-name {
							font-size: 32rpx;
							font-weight: 600;
						}

						.user {
							font-size: 22rpx;
							font-size: 500;
						}
					}

					.note-id {
						margin-top: 10rpx;
						font-size: 16rpx;
					}

					.note-profile {
						margin-top: 12rpx;
						opacity: 1;
						font-size: 20rpx;
						font-weight: 500;
						line-height: 36rpx;
						letter-spacing: 0.08em;
					}
				}

				.bottom {
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-radius: 0 0 30rpx 30rpx;

					.icon-btns {
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon-btns-item {

							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							margin-right: 48rpx;



							.icon-name {
								color: #3d3d3d;
								font-size: 14rpx;
								margin-top: 8rpx;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
	}

	.fixed-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.load-more-text {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin: 20rpx 0 60rpx;
	}
</style>